<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>首页</title>
    <style>
    body, html{
        width: 100%;height: 100%;
    }
    .changeTab{
        width:530px;
        margin: 25px 0 0 0;
    }
    .modal-dialog h5{
        color:#000;
    }
    .modal-dialog  p{
        color:#030303;
        padding-left: 40px;
    }
    .fixed-navbar #wrapper{
    }
    /*按钮划过样式*/
    .btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover{
        background: #006EE5;
    }
    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info{
        background: #006EE5;
    }
    .btn.active,.btn:active{
        box-shadow: none;
    }
    #tab01,#tab01:hover{
        background: #006EE5;  border-color: #006EE5;margin-right: 3%;border-radius: 4px;width: 82px;height: 34px; display: block;line-height: 34px; float: left;text-align: center;
    }
    #tab02,#tab02:hover{
        background: #FD6818;  border-color: #FD6818;margin-right: 3%;border-radius: 4px;width: 82px;height: 34px; display: block;line-height: 34px; float: left;text-align: center;
    }
    #tab03,#tab03:hover{
        background: #FFB400;  border-color: #FFB400;margin-right: 3%;border-radius: 4px;width: 82px;height: 34px; display: block;line-height: 34px; float: left;text-align: center;
    }
    .btn-group{
        width:100%;
        margin:20px 0 0 4%;
    }
    .list-group>.col-lg-2{
        height: 100%;
        width: 20%;
        float: left;
        padding-left: 0;
        margin-bottom: 17px;
    }
    .firstFont{
        font-size: 14px;
        color: #fff;
    }
    .secondFont{
        font-size: 22px!important;
        color: #fff!important;
    }
    .leftBox{
        float: right;
        margin-top: -135px;
        left: -1%;
        position: relative;
        z-index: 9;
        width: 14%;
        height: 30px;
    }
    .rightBox{
        float: right;
        margin-top: -159px;
        left: 13.7%;
        position: relative;
        z-index: 9;
        width: 14%;
        height: 30px;
    }
    .centerBox{
        float: right;
        margin-top: -129px;
        left: 8.9%;
        position: relative;
        width: 16.5%;
    }
    @media screen and (max-width: 1920px){
        .index-image{
            width: 42px;
            height: 42px;
            margin-top: 13px;
        }
        .new-nanel-body{
            padding: 15px 34px!important;
            height:100px;
        }
    }
    @media screen and (max-width: 1440px){
        .index-image{
            width: 42px;
            height: 42px;
            margin-top: 13px;
        }
        .new-nanel-body{
            padding: 15px 12px!important;
            height:100px;
        }
    }
    @media screen and (max-width: 1366px){
        .centerBox{
            width: 16%;
        }
    }
    .m-b-xs{
        margin-top: -7px!important;
    }
    </style>
</head>

<body class="fixed-navbar fixed-sidebar">

    <div class="content animate-panel p-b-n">
        <div class="row">
            <div class="hpanel">

                <ul class="list-group" id="goSearch" style="margin-bottom: 0;">
                    <div class="col-lg-2">
                        <div class="hpanel stats">
                            <div class="panel-body new-nanel-body" style="background: #FB6E52; color: #fff;border-radius: 6px;">
                                <div class="stats-title pull-left">
                                    <h5 style="font-weight: normal;">押品数量</h5>
                                </div>
                                <div class="stats-icon pull-right">
                                    <asset:image src="houseReport_.png" class="pull-right index-image"/>
                                </div>
                                <div class="m-t-xl">
                                    <h3 class="m-b-xs">
                                        <a href="" id="estateCount" class="secondFont"></a>
                                        <a href="" id="monthResult" class="firstFont"></a>
                                    </h3>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="hpanel stats" >
                            <div class="panel-body new-nanel-body" style="background: #FFC85B; color: #fff;border-radius: 6px;">
                                <div class="stats-title pull-left">
                                    <h5 style="font-weight: normal;">押品面积</h5>
                                </div>
                                <div class="stats-icon pull-right">
                                    <asset:image src="houseArea_.png" class="pull-right index-image"/>
                                </div>
                                <div class="m-t-xl">
                                    <h3 class="m-b-xs">
                                        <a href=""  id="buildArea" class="secondFont"></a>
                                        <h6></h6>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="hpanel stats">
                            <div class="panel-body new-nanel-body" style="background: #34C4E9; color: #fff; opacity: 0.8;border-radius: 6px;">
                                <div class="stats-title pull-left">
                                    <h5 style="font-weight: normal;">贷款余额</h5>
                                </div>
                                <div class="stats-icon pull-right">
                                    <asset:image src="buildTax_.png" class="pull-right index-image"/>
                                </div>
                                <div class="m-t-xl">
                                    <h3 class="m-b-xs">
                                        <a href="" id="loansBalance" class="secondFont"></a>
                                        <h6></h6>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-2">
                        <div class="hpanel stats">
                            <div class="panel-body new-nanel-body" style="background: #38D8BC; color: #fff; opacity: 0.8;border-radius: 6px;">
                                <div class="stats-title pull-left">
                                    <h5 style="font-weight: normal;">押品估值</h5>
                                </div>
                                <div class="stats-icon pull-right">
                                    <asset:image src="houseProve_.png" class="pull-right index-image"/>
                                </div>
                                <div class="m-t-xl">
                                    <h3 class="m-b-xs">
                                        <a href="" id="loansEvaluatePrice" class="secondFont"></a>
                                        <h6></h6>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2" style=" padding-right: 0;">
                        <div class="hpanel stats">
                            <div class="panel-body new-nanel-body" style="background: #FC8D51; color: #fff; opacity: 0.9;border-radius: 6px;">
                                <div class="stats-title pull-left">
                                    <h5 style="font-weight: normal;">平均动态抵押率</h5>
                                </div>
                                <div class="stats-icon pull-right">
                                    <asset:image src="capitalRating_.png" class="pull-right index-image"/>
                                </div>
                                <div class="m-t-xl">
                                    <h3 class="m-b-xs">
                                        <a href="" id="dynamicMortgageRate" class="secondFont"></a>
                                        <h6></h6>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>

                </ul>

                %{--覆盖多余部分--}%
                %{--<div class="leftBox"></div>--}%
                <div class="tooltip-demo text-center centerBox">
                    <div data-toggle="tooltip" data-placement="bottom" title="" data-original-title="点击图标查看数据说明">
                        <a class="fa fa-info-circle" href="#myModal" data-toggle="modal" style="font-size: 20px; color: #ccc"></a>
                    </div>
                </div>
                %{--覆盖多余部分--}%
                <div class="rightBox"></div>

            </div>

            <div class="hpanel hgreen" style="height: 100%">
                <div class="panel-body media-body">
                    <div class="col-xs-7 p-n" style="position:relative">
                        <div id="myMap1" style="width:100%;"></div>
                    </div>

                    <!--押品柱状图-->
                    <div class="hpanel col-xs-5" id="tabDown" >
                        <ul data-toggle="buttons" class="nav btn-group">
                            <a href="#tab1" data-toggle="tab" aria-expanded="true" id="tab01"  style="color:#fff">押品数量</a>
                            <a href="#tab2" data-toggle="tab" aria-expanded="true" id="tab02"  style="color:#fff">贷款余额<a>
                            <a href="#tab3" data-toggle="tab" aria-expanded="true" id="tab03" style="color:#fff">风险分布</a>
                        </ul>
                        <div class="tab-content">
                            <div id="tab1" class="tab-pane fade in active">
                                <div id="tab-1" class="changeTab"></div>
                            </div>
                            <div id="tab2" class="tab-pane fade">
                                <div id="tab-2" class="changeTab"></div>
                            </div>
                            <div id="tab3" class="tab-pane fade">
                                <div id="tab-3" class="changeTab"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="color-line" style="background: #3498db"></div>
                <div class="modal-header text-left">
                    <h4 class="modal-title" style="padding-left: 40px;color: #3498db">数据说明</h4>
                </div>
                <div class="modal-body">
                    <p><strong>押品数量</strong><br/>金融机构的房地产押品数量总和</p>
                    <p><strong>押品面积</strong><br/>金融机构的房地产押品面积总和</p>
                    <p><strong>贷款余额</strong><br/>借款人尚未归还的贷款总额，包括未归还的贷款本金和贷款利息</p>
                    <p><strong>押品估值</strong><br/>金融机构的房地产押品当前估值总和</p>
                    <p><strong>平均动态抵押率</strong><br/>动态抵押率是当前抵押贷款余额与当前抵押房产价值之间的比率，而平均动态抵押率是所有动态抵押率的平均值</p>
                    <p><strong>风险分布</strong><br/>金融机构的押品价值波动风险抵押率</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="zoneNumber" value="-1"/>
    <input type="hidden" id="province" value="-1"/>
    <!--map1引用文件-->
    <asset:javascript src="echarts/echarts-all-3.js" />
    <asset:javascript src="main/main_1.js" />
    <!--map1引用文件结束-->
</body>

</html>
